<template>
	<view class="uni-padding-wrap" style="padding-top: 30rpx;">
		<form modelValue="groupInfoForm">

			<uni-forms-item label="班组名称" required>
				<uni-easyinput v-model="groupInfoForm.groupName" :disabled="true" name="groupname" placeholder="请输入班组名称" class="ml-10" />
			</uni-forms-item>
			<!-- <uni-forms-item label="班组长" required>
			<picker @change="change" v-model="groupInfoForm.groupPrincipal" :value="index" :range="monitorList" range-key="name">
				<view class="uni-input">{{monitorList[index].name}}</view>
			</picker>
			</uni-forms-item> -->
			
			<uni-forms-item label="班组长" required>
				<uni-data-select v-model="groupInfoForm.principalId" :disabled="true" :localdata="monitorLists" class="ml-10" @change="change"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="所属公司" required>
				<uni-data-select v-model="groupInfoForm.companyId" :disabled="true" :localdata="companyList" class="ml-10" @change="companyChange"></uni-data-select>
			</uni-forms-item>

			<view class="group-info-title group-info-text">
				<view class="group-info-sub">
					进场时间
				</view>
				<view class="">
					<uni-datetime-picker  style="width: 400rpx;" :disabled="true" :clear-icon="false" @change="enterTimeChange" :value="groupInfoForm.enterTime" />
				</view>
			</view>
			<view class="group-info-title group-info-text" style="margin-top: 44rpx;">
				<view class="group-info-sub">
					退场时间
				</view>
				<view class="">
					<uni-datetime-picker  style="width: 400rpx;" :disabled="true" :clear-icon="false"  @change="outTimeChange" :value="groupInfoForm.outTime" />
				</view>
			</view>
			 
			<uni-forms-item label="备注" style="margin-top: 44rpx;">
				<uni-easyinput type="textarea" :disabled="true" v-model="groupInfoForm.remark" class="ml-10" placeholder="请输入备注" />
			</uni-forms-item>
			<view class="uni-btn-v group-info_footer">
				<!-- <button form-type="submit" type="primary" @click="submitForm">确定</button> -->
				<button  form-type="submit" type="primary" @click="goBack">返回</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 表格加载状态
				loading: false,
				// 表格数据
				tableData: [],
				// 班组信息
				groupInfoForm: {
					groupName: "",
					groupPrincipal: "",
					remark: "",
					principalId: "",
					outTime: "",
					userInGroup:[]
				},
				// 上传图片
				imageValue: [],
				// 自定义上传图片样式
				imageStyles: {
					width: 64,
					height: 64,
				},
				index: 0,
				monitorList: [{
						"id": 0,
						"name": "篮球"
					},
					{
						id: 1,
						name: "足球"
					},
					{
						id: 2,
						name: "游泳"
					}
				],
				monitorLists: [],
				userInGroup : [],
				companyList : []

			}
		},
		props: {
			userList: {
				type:Array
			},
			manageInfo: {
				type: Object
			},
			flag: {
				type: String
			}
		},
		async created() {
			await uni.request({
				url: 'http://116.205.142.103:8808/labor/system/user/getCompany',
				method: 'get',
				success: res => {
					let monitorLists = res.data.data
					monitorLists.forEach(item =>{
						this.companyList.push({value:item.id , text: item.companyName})
					})
					console.log(JSON.stringify(this.companyList));
				}
			})
			await uni.request({
				url: 'http://116.205.142.103:8808/labor/system/user/getMonitorList',
				method: 'get',
				// 	responseType: 'arraybuffer',
				success: res => {

					this.monitorList = res.data.data
					this.monitorList.forEach(item =>{
						this.monitorLists.push({value:item.id , text: item.name})
					})
					console.log(JSON.stringify(this.monitorLists));
				}
			})
			const groupInfoForm = uni.getStorageSync("editManage")
			console.log("created111222", groupInfoForm);
			debugger
			this.manageInfo.userList = groupInfoForm.userList
			const {
				outTime
			} = groupInfoForm;
			this.groupInfoForm = {
				...groupInfoForm,
				outTime: outTime,
			};

			console.log("created111", this.groupInfoForm);
			console.log("=================================="+JSON.stringify(this.manageInfo));
		},
		// mounted(){
		// 	this.groupInfoForm = uni.getStorageSync("editManage")
		// },
		methods: {
			enterTimeChange(e){
				this.groupInfoForm.enterTime = e
				debugger
			},
			outTimeChange(e){
				this.groupInfoForm.outTime = e
				debugger
			},
			onDateChange(e) {
				debugger
				setTimeout(() => {
					// this.startDate = this.range[0]
					// this.endDate = this.range[1]
					// this.getDatas()
				}, 500)
			},
			change(e) {
				console.log('e:', e);
				this.groupInfoForm.principalId = e
			},
			companyChange(e){
				console.log('e:', e);
				this.groupInfoForm.companyId = e
			},
			// 提交表单
			formSubmit() {

			},
			submitForm() {
				console.log(JSON.stringify(JSON.stringify(this.userList) + "==============" + this.flag));
				debugger
				this.userList.forEach(item => {
					this.userInGroup.push(""+item.id)
				})
				this.groupInfoForm.userInGroup = this.userInGroup
				if (this.flag == 1) {
					uni.request({
						url: 'http://116.205.142.103:8808/labor/system/group/updateGroup',
						method: 'post',
						data: this.groupInfoForm,
						success: res => {
							console.log(JSON.stringify(res.data))
							uni.showModal({
								title: "修改成功",
								showCancel: false,
								confirmText: "确定",
								success:() =>{
									let pages = getCurrentPages(); // 当前页⾯
									let beforePage = pages[pages.length - 2]; // 上⼀页
									uni.navigateBack({
									   success: function() {
											beforePage.onLoad(); // 执⾏上⼀页的onLoad⽅法
									    }
									})

									// uni.navigateTo({
									// 	url: "/pages/management/management",
									// 	animationType: "fade-in",
									// });
								}
							})
							
						}
					})
				} else {
					uni.request({
						url: 'http://116.205.142.103:8808/labor/system/group/insertNewGroup',
						method: 'post',
						data: this.groupInfoForm,
						success: res => {
							console.log(JSON.stringify(res.data))
							uni.showModal({
								title: "修改成功",
								showCancel: false,
								confirmText: "确定"
							})
						}
					})
				}
			},
			goBack(){
				let pages = getCurrentPages(); // 当前页⾯
				let beforePage = pages[pages.length - 2]; // 上⼀页
				uni.navigateBack({
				   success: function() {
						//beforePage.onLoad(); // 执⾏上⼀页的onLoad⽅法
				    }
				})
			},
			// 添加进场附件
			addEnterInfo() {
				// TODOS
				console.log("添加")
			},
			// 查看进场附件
			viewEnterInfo() {
				uni.previewImage({
					current: 0,
					urls: [
						'https://img-blog.csdnimg.cn/20210906153958594.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224'
					] //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			// 上传进场附件
			uploadEnterInfo() {
				console.log("上传进场附件")
			},
			// 删除进场附件
			delEnterInfo() {
				console.log("删除进场附件")
			},
			// 添加退场附件
			addOutInfo() {
				// TODOS
				console.log("添加")
			},
			// 查看退场附件
			viewEnterInfo() {
				uni.previewImage({
					current: 0,
					urls: [
						'https://img-blog.csdnimg.cn/20210906153958594.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224'
					] //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			// 上传退场附件
			uploadEnterInfo() {
				console.log("上传退场附件")
			},
			// 删除退场附件
			delOutInfo() {
				console.log("删除退场附件")
			},

			// 获取上传状态
			select(e) {
				console.log('选择文件：', e)
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},

			// 上传成功
			success(e) {
				console.log('上传成功')
			},

			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			}
		}
	}
</script>

<style scoped lang="scss">
	/deep/ .uni-stat__select {
		padding: 0!important;
	}
	.group-info-title {
		display: flex;
		flex-direction: row;

		.group-info-sub {
			width: 130rpx;
			margin-bottom: 44rpx;
		}
	}

	.group-info-text {
		font-size: 13px;
		color: #666666;
	}

	.group-info_content {
		flex: 1;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.group-info_button {
		color: #007aff;
		position: relative;
	}

	.group-info_button_danger {
		color: #e64340;
	}

	.group-info_footer {
		display: flex;
		flex-direction: row;
		justify-content: space-around;

		button {
			width: 40%;
		}
	}

	.group-info_upload {
		padding: 10px;
		padding-top: 0;
		width: 100%;
		height: 100%;
		background-color: red;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		border: 1px solid red;
	}
	
	.ml-10 {
		margin-left: 10rpx;
	}
</style>
